import React, { Component } from 'react'


export default class App extends Component {

    state = {
        count: 100
    }

    // 普通函数在事件处理中会丢失 this 
    add = function () {
        console.log('你好世界', this);
    }

    // 箭头函数中 this 无问题
    add2 = () => {
        console.log('你好中国', this);
    }

    // 如果普通函数中需要使用 this 我们可以修改 this 的指向
    add3 = function () {
        console.log('你好浙江', this);
    }

    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>

                {/* 事件调用不需要自己加 () 来执行 */}
                <button onClick={this.add()}>点击加 1</button>
                <button onClick={this.add}>点击加 1</button>
                <button onClick={this.add2}>点击加 2</button>

                <button onClick={this.add3.bind(this)}>点击加 3</button>

            </div>
        )
    }
}
